<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
        <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

            <c:set var="now" value="<%=new java.util.Date()%>" />

            <div class="row full-width">
                <div class="columns">
                <!-- error div -->
					<c:if test="${not empty message}">
						<div class="row">
							<div class="large-12 large-centered columns margin-15px-top">
								<div data-alert class="alert-box alert radius">
									<b>${message}</b> <a href="#" class="close">&times;</a>
								</div>
							</div>
						</div>
					</c:if>
                    <div class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns">
                        <!--content-->
                        <br>
                 <span>        
                 <a href="${pageContext.request.contextPath}/task/create.html" 
                 	class="button update-profile create-new-task" style="width: 152px;">
                 <img src="<c:url value="/resources/img/ic_task.png"/>" class="left">
                 <span style="position: absolute;left: 33px;bottom: 8px;">Create New Task</span>
                 </a> 
                 </span>
                        <br>
                        <div class="row collapse">
                            <div class="large-16 small-16 background-secondary columns">
                                <br>
                                <div class="row">
                                    <div class="columns">
                                        <span class="subscribed">YOU HAVE <span id="numOfTask"
									class="subscribed-number">${numOfActivatedTasks}/${numOfTasks}
										TASKS</span> ARE ACTIVATED
                                        </span>
                                    </div>
                                </div>
                                <br>
                                <c:forEach var="task" items="${tasks}" varStatus="theCount">
                                    <jsp:useBean id="now" class="java.util.Date" />
                                    <c:choose>
                                        <c:when test="${task.departDate ge now}">
                                          <c:set var="columns" value="border-blue bg-white columns" />
                                            <c:set var="style_panel_title" value="task-panel-title" />
                                            <c:set var="style_panel_value" value="task-panel-value" />
                                            <c:set var="style_panel_key" value="task-panel-key" />
                                            <c:set var="style_city_code" value="green-bold" />
                                            <c:set var="style_price" value="price" />
                                            <c:set var="getrs_button" value="" />
                                        </c:when>
                                        
                                        <c:otherwise>
                                        <c:set var="columns" value="border-blue unavaibale-background columns" />
                                            <c:set var="style_panel_title" value="task-panel-title-unavailable" />
                                            <c:set var="style_panel_value" value="task-panel-value-unavailable" />
                                            <c:set var="style_panel_key" value="task-panel-key-unavailable" />
                                            <c:set var="style_city_code" value="unavailable" />
                                            <c:set var="style_price" value="unavailable-price" />
                                            <c:set var="getrs_button" value="disabled" />
                                        </c:otherwise>
                                    </c:choose>
                                    <div class="row task-detail" id="flight${theCount.index}">
                                        <div class="columns">
                                            <div class="${columns}">
                                                <div class="row">
                                                    <br>
                                                    <div class="large-11 medium-11 un-padding columns">
                                                        <div class="row">
                                                            <span class="${style_panel_title}">${task.name }</span>
                                                        </div>
                                                        <div class="row">
                                                            <div class="small-8 un-padding columns">
                                                                <span class="${style_panel_value}">
														<c:choose>
															<c:when test="${task.typeOfTrip == 'roundTrip'}">Round-trip</c:when>
															<c:otherwise>One-way</c:otherwise>
														</c:choose>
													</span> 
                                                                <br>

                                                                <div style="margin-top: 5px;">
                                                                    <span class="${style_panel_key}">From: </span><span class="${style_city_code}">${task.fromCode}</span><span class="${style_panel_value}"> - </span><span class="${style_panel_value}">${task.fromAirport}, ${task.fromCountry}</span> 
                                                                    <br> <span class="${style_panel_key}">To: </span><span class="${style_city_code}">${task.toCode}</span><span class="${style_panel_value}"> - </span><span class="${style_panel_value}">${task.toAirport}, ${task.toCountry}</span>
                                                                </div>
                                                                <div style="margin-top: 5px;">
                                                                    <span class="${style_panel_key}">Airlines: </span>
                                                                    <span class="${style_panel_value}">
																<c:choose>
																	<c:when test="${task.airlines == ''}">All</c:when>
																	<c:when test="${task.airlines == null}">All</c:when>
																	<c:otherwise>
																		<script>
 																			var st = "${task.airlines}";
 																			document.write(st.replace(/;/g, ", "));
																		</script>
																	</c:otherwise>
																</c:choose>
															</span>
                                                                </div>
                                                                <br>
                                                            </div>
                                                            <div class="small-8 un-padding columns">
                                                                <span class="${style_panel_key}">Class: </span><span class="${style_panel_value}">${task.cabinClass}</span> 
                                                                <br>
                                                                <div style="margin-top: 5px;">
                                                                    <span class="${style_panel_key}">Depart: </span>
                                                                    <span class="${style_panel_value}">
															<fmt:formatDate value="${task.departDate}" pattern="yyyy/MM/dd"/></span>
                                                                    <span class="${style_panel_value}">
															<c:if test="${task.flexibleDays>0}">
																<span class="${style_panel_value}">(+/- ${task.flexibleDays} days)</span>
															</c:if>
														</span>
                                                                    <br>
                                                                    <c:if test="${task.typeOfTrip == 'roundTrip'}">
                                                                        <span class="${style_panel_key}">Return: </span>
                                                                        <span class="${style_panel_value}">
																<fmt:formatDate value="${task.returnDate}" pattern="yyyy/MM/dd" /></span>
                                                                        <span class="${style_panel_value}">
																<c:if test="${task.flexibleDays>0}">
																	<span class="${style_panel_value}">(+/- ${task.flexibleDays} days)</span>
																</c:if>
															</span>
                                                                    </c:if>
                                                                    <c:if test="${task.typeOfTrip != 'roundTrip'}">
                                                                        <span>&nbsp;</span>
                                                                    </c:if>
                                                                </div>
                                                                <div style="margin-top: 5px;">
                                                                    <span class="${style_panel_key}">Max stop: </span>
                                                                    <span class="${style_panel_value}">
															${task.maxStops }
															<c:if test="${task.maxStops == 0}">(Direct)</c:if>
															<c:if test="${task.maxStops == 2}">(Any)</c:if>
														</span>
                                                                </div>
                                                                <br>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="large-5 medium-5 un-padding columns">
                                                        <div class="row">    	
                                                            <c:if test="${task.maxPrice !='-1'}">
<%--                                                             <fmt:parseNumber var="maxPrice" type="number" value="${task.maxPrice}" /> --%>
                                                            
                                                            <span class="${style_price}"><fmt:formatNumber maxIntegerDigits="11" value="${task.maxPrice}" /> ${task.currencyCode}</span>
                                                            </c:if>
                                                        </div>
                                                        <div class="row collapse">
                                                            <a class="task-panel" href="${pageContext.request.contextPath}/task/edit.html?taskId=${task.taskId}">
                                                                <u class="task-edit loading_controller_group">Edit</u>&nbsp;&nbsp;</a>

                                                            <a class="task-panel" onclick="requestTaskDelete('${task.taskId}','${theCount.index}')">
                                                                <u class="task-delete">Delete</u>&nbsp;</a>

                                                            <button  ${getrs_button} name="${getrs_button}" onclick="getResult('${task.id}','${task.taskId}')" class="button get-result a-get-result right">
                                                                <img src="<c:url value="/resources/img/ic_get_result.png "/>" class="subscribe" />
                                                                <span style="position: absolute; width: 73px; left: 35px; bottom: 3px; font-size: 17px;">Get Result</span>
                                                            </button>
                                                        </div>
                                                        <br>
                                                    </div>
                                                </div>
												<!-- Expand List Result -->
												<div class="row">
													<div id="${task.id}" class="row bg-expand-list">
														<div id="lastPostsLoader-${task.id}" class="lastPostLoader">
															<div id="nativeLoading-${task.id}" class="native-loading-modal"></div>
															<!-- Ajax Generation -->
														</div>
													</div>
													<div class="row close-collapse" align="center" id="open-${task.id}" class="row" onclick="openResult('${task.id}')">
															<img src="<c:url value="/resources/img/ic_expand.png"/>" />
													</div>
													<div class="row close-collapse" align="center" id="close-${task.id}" class="row" onclick="closeResult('${task.id}')">
															<img src="<c:url value="/resources/img/ic_collapse.png"/>" />
													</div>
												</div>
                                            </div>
                                        </div>
                                    </div>
                                    <span id="br${theCount.index}"><br></span>
                                </c:forEach>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
